<template>
  <section class="wrapper">
    <myHeader :obj="myObj" @events="events"></myHeader>
    <main>
      <div class="friendTitle_0313">好友</div>
      <ul class="friendUl_0313">
        <li class="friendLi_0313">
          <i class="defaultI_0313 activeI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
        <li class="friendLi_0313">
          <i class="defaultI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
        <li class="friendLi_0313">
          <i class="defaultI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
        <li class="friendLi_0313">
          <i class="defaultI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
        <li class="friendLi_0313">
          <i class="defaultI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
        <li class="friendLi_0313">
          <i class="defaultI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
        <li class="friendLi_0313">
          <i class="defaultI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
        <li class="friendLi_0313">
          <i class="defaultI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
        <li class="friendLi_0313">
          <i class="defaultI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
        <li class="friendLi_0313">
          <i class="defaultI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
        <li class="friendLi_0313">
          <i class="defaultI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
        <li class="friendLi_0313">
          <i class="defaultI_0313"></i>
          <div class="friendFace_0313"></div>
          <div class="friendName_0313">陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五陈五</div>
        </li>
      </ul>
      <router-link to="/recommendedUser">
        <button class="send_0313">确认推荐</button>
      </router-link>
    </main>

  </section>
</template>
<script>
import myHeader from './base/myHeader';
export default {
  data () {
    return {
      myObj: {
        type: 2,
        text: '我的朋友'
      }
      
    }
  },
  methods: {
    events(i){
      if(i == 2) {
        history.back();
      }
    },
  },
  components: {
    myHeader
  }
}

</script>
<style lang="less">
.wrapper {
  width: 3.75rem;
  height: 100%;
  main {
    padding-top: .44rem;
    height: 100%;
    width: 3.75rem;
    position: absolute;
    top: 0;
    box-sizing: border-box;
    overflow-y: auto;
    .send_0313 {
      width: 3.35rem;
      height: .47rem;
      display: block;
      border: none;
      background: #557AFF;
      color: white;
      font-size: .18rem;
      margin: .9rem auto .4rem;
      border-radius: .05rem;
    }
    .friendUl_0313 {
      padding: 0 .15rem;
      background: white;
      .friendLi_0313 {
        height: .6rem;
        display: flex;
        align-items: center;
        &:nth-last-child(1) {
          .friendName_0313 {
            border-bottom: none;
          }
        }
        .friendName_0313 {
          width: 2.55rem;
          height: .59rem;
          line-height: .59rem;
          border-bottom: .01rem solid #E1E1E1;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
         
        }
        .defaultI_0313 {
          display: block;
          width: .2rem;
          height: .2rem;
          background: url('../assets/img/expert/icon_unsekected@3x.png') center center;
          background-size: cover;
          margin-right: .15rem;
          background-repeat: no-repeat!important;
        }
        .activeI_0313 {
          background: url('../assets/img/expert/icon_yes@3x.png') center center!important;
          background-repeat: no-repeat;
          background-size: cover!important;
          background-repeat: no-repeat!important;
        }
        .friendFace_0313 {
          width: .4rem;
          height: .4rem;
          border-radius: 50%;
          margin-right: .1rem;
          background: url('../assets/img/my@3x.png') center center;
          background-size: cover;
          background-repeat: no-repeat;
        }
      }

    }
    .friendTitle_0313 {
      width: 100%;
      height: .32rem;
      padding-left: .15rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-size: .12rem;
      color: #818181; 
      
    }
  }
}
  
</style>
